<template>
	<el-row>
		<el-col :span="24">
			<el-select v-model="forms.county" clearable placeholder="请选择县">
				<el-option
					v-for="item in origenOption"
					:key="item.value"
					:label="item.name"
					:value="item.value"
				/>
			</el-select>
		</el-col>
	</el-row>
</template>

<script lang="ts" setup>
import { ref, reactive, defineEmits, defineProps, computed, watch, toRefs } from 'vue'
import { getCityName } from '@/api/system/dept.js'
const props = defineProps({
	form: {
		type: Object,
		required: true,
		default: () => {}
	},
	cityCode: {
		type: String,
		required: true,
		default: ''
	}
})
let emit = defineEmits(['update:form'])
let origenOption = ref(null)
let forms = ref(null)
watch(
	() => props.form,
	(val) => {
		forms.value = val
		emit('update:form', val)
	},
	{ immediate: true, deep: true }
)

watch(
	() => props.cityCode,
	(val) => {
		if (val == '') {
			return
		} else {
			countys(val)
		}
	},
	{ immediate: true, deep: true }
)
async function countys(e: any) {
	let { data: origenOptionOld } = await getCityName({ parent: e })
	origenOption.value = origenOptionOld
}
</script>
<style lang="scss" scoped></style>
